<html>
<head>
	<title>CPE Operation Intelligence</title>

	<!-- sb-admin -->
	<link href="imports/sb-admin/css/bootstrap.min.css" rel="stylesheet">
	<link href="imports/sb-admin/css/sb-admin.css" rel="stylesheet">
	<link href="imports/sb-admin/css/plugins/morris.css" rel="stylesheet">
	<link href="imports/sb-admin/font-awesome-4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
	<script src="imports/sb-admin/js/jquery-1.11.0.js"></script>
	<script src="imports/sb-admin/js/bootstrap.min.js"></script>

	<!-- Canvas js -->
	<script type="text/javascript" src="imports/canvasjs/canvasjs.min.js"></script>

	<!-- Graph -->
	<script src="elements/charts/js/graph_aps_count.js"></script>
	<script src="elements/charts/js/graph_aps_percentage.js"></script>

	<!-- Slider -->
	<link rel="stylesheet" id="themeCSS" href="imports/jQRangeSlider/css/classic.css">
	<!--<link rel="stylesheet" href="imports/jQRangeSlider/demo/style.css">-->
	<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
	<script src="imports/jQRangeSlider/lib/jquery.mousewheel.min.js"></script>
	<script src="imports/jQRangeSlider/jQAllRangeSliders-min.js"></script>

	<!-- Highcharts -->
	<script src="http://code.highcharts.com/highcharts.js"></script>
	<script src="http://code.highcharts.com/modules/exporting.js"></script>
	<!-- <script type="text/javascript" src="alerts/alerts.js"></script> -->

	<script type="text/javascript" src="charts/js/region.js"></script>


</head>
<body onload="clearfunc();designgraph_region(2);setcpe();alerts();">
	<div id="wrapper">
		<?php 
			require 'elements/navigation_bar.php';
			echo print_navigation("region_charts");
	       // require 'elements/charts/network.php';
		?>
		<div id="page-wrapper">
			<div >

				<!-- Page Heading -->
				<div class="row">
					<div class="col-lg-12">
						<h1 class="page-header">
							<i class="fa fa-fw fa-bar-chart-o">
							</i>
							CPE Region Distribution
							<small id="cpe_label"></small> 
						</h1>
					</div>
				</div>
				
						<div class="row clearfix">
							<div class="col-md-12 column">
								<div class="row clearfix">
									<div class="col-md-12 column">
										<div id="alert_php"></div>
									</div>
								</div>
								<div class="row clearfix">
									<div class="col-md-12 column">
										<div id="notice_php"></div> 
									</div>
								</div>
							</div>
						</div>


				<!-- Percentage HTML -->
				<div class="row clearfix">
					<div class="col-lg-10 column">
						<h3 class="panel-title">
									<legend>Stacked Percentage Column</legend>
								</h3>
						<div class="panel-body">
								<div class="row">
									<div id="container" style="min-width: 310px; height: 400px; max-width: 1200px; margin: 0 auto">
									</div>
								</div>
							</div>
					</div>
					<div class="col-lg-2 column">
						<fieldset>
							
							<legend>Options:</legend>
							<div class="span2" style="width:150px;margin:auto;align: center;">
								<button type="button" class="btn btn-primary btn-block" onclick="clearfunc();designgraph_region(1)">  <span class="glyphicon glyphicon-time" aria-hidden="true"></span> Minutes</button>
								<br /><button type="button" class="btn btn-primary btn-block" onclick="clearfunc();designgraph_region(2)">  <span class="glyphicon glyphicon-time" aria-hidden="true"></span> Days</button>
								<br /><button type="button" class="btn btn-primary btn-block" onclick="clearfunc();designgraph_region(3)">  <span class="glyphicon glyphicon-time" aria-hidden="true"></span> Weeks</button>
							</div>
							</fieldset>
						</fieldset>
					</div>
				</div>

			</div>

		</div>
	</div>		
</body>
</html>